import { PenChildProps } from "@/types";
import { Input, InputNumber, Select, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Image } from "antd";
export function PenImg({ penOptions, setPenValue }: PenChildProps) {
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        {penOptions.backgroundImage && (
          <FormRowCol label="背景预览">
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Image height={75} src={penOptions.backgroundImage} />
            </div>
          </FormRowCol>
        )}
        <FormRowCol label="背景图地址">
          <Input.TextArea
            placeholder={"url地址"}
            value={penOptions.backgroundImage}
            onChange={(e) => {
              setPenValue("backgroundImage", e.target.value);
            }}
          />
        </FormRowCol>
        {penOptions.strokeImage && (
          <FormRowCol label="描绘图预览">
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Image height={75} src={penOptions.strokeImage} />
            </div>
          </FormRowCol>
        )}
        <FormRowCol label="描绘图地址" illustrate={"线条填充图片 url"}>
          <Input.TextArea
            placeholder={"url地址"}
            value={penOptions.strokeImage}
            onChange={(e) => {
              setPenValue("strokeImage", e.target.value);
            }}
          />
        </FormRowCol>
        {penOptions.image && (
          <FormRowCol label="图片预览">
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Image height={75} src={penOptions.image} />
            </div>
          </FormRowCol>
        )}

        <FormRowCol label="图片地址">
          <Input.TextArea
            placeholder={"url地址"}
            value={penOptions.image}
            onChange={(e) => {
              setPenValue("image", e.target.value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="图片宽度">
          <InputNumber
            className={"w-full"}
            placeholder={"自适应"}
            value={penOptions.iconWidth}
            onChange={(value) => setPenValue("iconWidth", value)}
          />
        </FormRowCol>
        <FormRowCol label="图片高度">
          <InputNumber
            placeholder={"自适应"}
            className={"w-full"}
            value={penOptions.iconHeight}
            onChange={(value) => setPenValue("iconHeight", value)}
          />
        </FormRowCol>
        <FormRowCol label="保持比例" illustrate={"图片是否保持原始长宽比"}>
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.imageRatio}
            onChange={(checked) => {
              setPenValue("imageRatio", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="水平偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.iconLeft}
            onChange={(value) => setPenValue("iconLeft", value)}
          />
        </FormRowCol>
        <FormRowCol label="垂直偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.iconTop}
            onChange={(value) => setPenValue("iconTop", value)}
          />
        </FormRowCol>
        <FormRowCol label={"对齐方式"}>
          <Select
            className={"w-full"}
            value={penOptions.iconAlign}
            options={[
              { label: "上", value: "top" },
              { label: "下", value: "bottom" },
              { label: "左", value: "left" },
              { label: "右", value: "right" },
              { label: "左上", value: "left-top" },
              { label: "右上", value: "right-top" },
              { label: "左下", value: "left-bottom" },
              { label: "右下", value: "right-bottom" },
              { label: "居中", value: "center" },
            ]}
            onSelect={(value) => {
              setPenValue("iconAlign", value);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
